<template>
  <Header v-if="!isAuthPage" />
  <router-view v-slot="{ Component, route }">
    <transition 
      :name="getTransitionName(route)" 
      mode="out-in"
      :duration="{ enter: 200, leave: 100 }"
    >
      <component :is="Component" :key="route.path" />
    </transition>
  </router-view>
  <Footer v-if="!isAuthPage" />
</template>

<script>
import { computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from './store/modules/user'
import { useAuth } from './composables/useAuth'
import Header from './components/layout/Header.vue'
import Footer from './components/layout/Footer.vue'

export default {
  name: 'App',
  components: { Header, Footer },
  setup() {
    const route = useRoute()
    const userStore = useUserStore()
    const { syncAuth } = useAuth()
    
    const isAuthPage = computed(() => {
      const authPaths = [
        '/',
        '/login',
        '/xueshengdenglu',
        '/qiyedenglu',
        '/register',
        '/email-verification',
        '/reset-password',
        '/profile', // 添加个人中心页面，不显示Header
        '/use/home' // 添加学生中心页面，不显示Header
      ]
      // 企业中心页面也不显示Header和Footer
      if (route.path.startsWith('/code/enterprise/')) {
        return true
      }
      return authPaths.includes(route.path)
    })

    // 根据路由获取过渡效果名称
    const getTransitionName = (route) => {
      // 企业中心页面使用特殊的过渡效果
      if (route.path.startsWith('/code/enterprise/')) {
        return 'enterprise-fade'
      }
      // 其他页面使用默认的fade效果
      return 'fade'
    }
    
    // 页面加载时同步token状态
    onMounted(() => {
      syncAuth()
    })
    
    return {
      isAuthPage,
      getTransitionName
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;
}

/* 默认过渡效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.4s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* 企业中心专用过渡效果 - 避免白色闪烁 */
.enterprise-fade-enter-active, .enterprise-fade-leave-active {
  transition: all 0.2s ease;
}
.enterprise-fade-enter-from {
  opacity: 0;
  transform: translateX(10px);
}
.enterprise-fade-leave-to {
  opacity: 0;
  transform: translateX(-10px);
}
.enterprise-fade-enter-to, .enterprise-fade-leave-from {
  opacity: 1;
  transform: translateX(0);
}
</style>